<template>
	<view class="page">
		<u-navbar
			:bgColor="`rgba(255,255,255,${opacity})`"
			:fixed="true"
			leftIcon=" "
		>
			<!-- #ifdef MP-WEIXIN -->
			<view slot="left" class="wx-title">
				<text class="wx-title_text" :style="{opacity}">我的</text>
				<view class="l-f">
					<uni-icons
					@tap="goSeeding"
					style="margin-right: 30rpx;"
					custom-prefix="iconfont" 
					type="icon-liaotian" 
					size="50rpx" 
					:color="opacity > 1 ? '#333333' : '#ffffff'"></uni-icons>
					<uni-icons 
					@tap="goSetting"
					custom-prefix="iconfont" 
					type="icon-shezhi" 
					size="50rpx" 
					:color="opacity > 1 ? '#333333' : '#ffffff'"></uni-icons>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view slot="center" class="nav-title" :style="{opacity}">我的</view>
			<view class="l-f" slot="right">
				<uni-icons 
				@tap="goSeeding"
				style="margin-right: 30rpx;"
				custom-prefix="iconfont" 
				type="icon-liaotian" 
				size="50rpx" 
				:color="opacity > 1 ? '#333333' : '#ffffff'"></uni-icons>
				<uni-icons 
				@tap="goSetting"
				custom-prefix="iconfont" 
				type="icon-shezhi" 
				size="50rpx" 
				:color="opacity > 1 ? '#333333' : '#ffffff'"></uni-icons>
			</view>
			<!-- #endif -->
		</u-navbar>
		<!-- 用户信息 -->
		<view class="user-box">
			<image class="user-bg" src="@/static/images/user-bg.png"></image>
			<image class="user-vip-bg" src="@/static/images/vip-card-bg.png"></image>
			<image class="user-arc" src="@/static/images/arc.png"></image>
			<view class="user-info">
				<view class="head-box">
					<u-avatar :src="userInfo.avatarUrl" size="130rpx"></u-avatar>
					<text class="head-box_nickname">{{userInfo.info && userInfo.info.mobile ? userInfo.info.mobile : ''}}</text>
				</view>
				<view class="grade-box">
					<view class="grade-box_label">当前会员等级: {{userInfo.rank_name && userInfo.rank_name.rank_name ? userInfo.rank_name.rank_name : 0}}</view>
					<view class="grade-box_desc">购物折扣率(%): {{userInfo.rank_name && userInfo.rank_name.discount ? userInfo.rank_name.discount*10 : 0}}</view>
				</view>
			</view>
		</view>
		<view class="list-box">
			<!-- 余额 -->
			<view class="money-box">
				<view class="money-box_item">
					<view class="money-box_item_num">{{userInfo.info && userInfo.info.advance ? userInfo.info.advance : '0.00'}}</view>
					<view class="money-box_item_label">余额</view>
				</view>
				<view class="money-box_item">
					<view class="money-box_item_num">{{userInfo.info && userInfo.info.user_money ? userInfo.info.user_money : '0.00'}}</view>
					<view class="money-box_item_label">红包</view>
				</view>
				<view class="money-box_item">
					<view class="money-box_item_num">{{userInfo.info && userInfo.info.frozen_money ? userInfo.info.frozen_money : '0.00'}}</view>
					<view class="money-box_item_label">积分</view>
				</view>
			</view>
			<!-- 我的订单 -->
			<view class="order-box">
				<view class="order-title">
					<text class="order-title_text">我的订单</text>
					<view class="order-title_right l-f" hover-class="hover" @click="goPage('/pages/aPackage/orderList/orderList?type=0',true)">
						<text class="order-title_right_text">查看全部订单</text>
						<uni-icons type="right" size="28rpx" color="#999999"></uni-icons>
					</view>
				</view>
				<u-grid
					:border="false"
					:col="5"
					@click="onOrderItem"
				>
					<u-grid-item
						class="order-item"
						v-for="(item,index) in allOrderNum"
						:key="index"
					>
						<uni-icons 
						 custom-prefix="iconfont" 
						 :type="item.icon" 
						 size="58rpx" 
						 color="#FD6F57"></uni-icons>
						 <u-badge 
						 type="error" 
						 :offset="[0,20]"
						 :absolute="true"
						 :showZero="true" 
						 :max="99" 
						 :value="item.num"></u-badge>
						<text class="order-label" >{{item.name}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 列表 -->
			<view class="more-box">
				<u-cell-group :border="false">
					<block 
					v-for="(item,index) in moreList"
					:key="index">
						<u-cell
						@click="itemClick"
						:title="item.name" 
						:value="item.value" 
						:border="false"
						:url="item.path"
						:name="item.name"
						:clickable="true"
						:titleStyle="{
							fontSize: '28rpx',
							color: '#333333',
							marginLeft: '10rpx',
							paddingTop: '10rpx',
							paddingBottom: '10rpx'
						}">
							<view slot="title" >
								<button class="g-share-btn share-box" 
								v-if="item.name === '分享'" 
								type="default" open-type="share">
									 <text class="share-box_title">{{item.name}}</text>
									 <text class="share-box_value">邀请好友</text>
								</button>
								<text class="item-title" v-else>{{item.name}}</text>
							</view>
							<uni-icons
							slot="icon"
							 custom-prefix="iconfont" 
							 :type="item.icon" 
							 size="40rpx" 
							 color="#FD6F57"></uni-icons>
						</u-cell>
						<!-- 判断是否为历史记录 -->
						<scroll-view :scroll-x="true" v-if="item.name === '浏览历史'">
							<view class="history-box" v-if="historyList.length > 0">
								<view class="history-item"
								@tap="goDetail(hItem.goods_id)"
								v-for="(hItem,hIndex) in historyList" 
								:key="hItem.goods_id">
									<image class="history-cover" :src="hItem.goods_thumb"></image>
								</view>
							</view>
						</scroll-view>
					</block>
				</u-cell-group>
			</view>
		</view>
		<!-- 联系客服弹窗 -->
		<u-action-sheet 
		@close="phoneShow = false"
		@select="onCall"
		:closeOnClickOverlay="true" 
		:closeOnClickAction="true" 
		:actions="phoneAction"
		 cancelText="取消" 
		 title="客服电话" 
		 :round="20" 
		 :show="phoneShow"
		 :isShowClose="false"></u-action-sheet>
		<tab-bar/>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin'])
		},
		data() {
			return {
				opacity: 0,
				allOrderNum: [
					{
						num: 0,
						icon: 'icon-daifukuan',
						name: '待付款'
					},
					{
						num: 0,
						icon: 'icon-daifahuo',
						name: '待发货'
					},
					{
						num: 0,
						icon: 'icon-daifahuo',
						name: '待收货'
					}
				],
				moreList: [
					
						{
							value: '',
							icon: 'icon-lishi',
							name: '浏览历史',
							color: '',
							path: ''
						},
						{
							value: '',
							icon: 'icon-shouhuodizhi',
							name: '地址管理',
							color: '',
							path: '/pages/aPackage/addressList/addressList'
						},
						{
							value: '',
							icon: 'icon-fenxiang',
							name: '分享',
							color: '',
							path: ''
						},
						{
							value: '',
							icon: 'icon-shoucang',
							name: '我的收藏',
							color: '',
							path: ''
						},
						{
							value: '',
							icon: 'icon-kefu',
							name: '联系客服',
							color: '',
							path: ''
						},
						{
							value: '',
							icon: 'icon-shezhi',
							name: '设置',
							color: '',
							path: '/pages/aPackage/setting/setting'
						},
					
				],
				phoneAction: [
					{
						name: ''
					}
				],
				phoneShow: false,
				historyList: [], // 历史记录
			}
		},
		onPageScroll(e) {
			if(e.scrollTop < 10) {
				this.opacity = 0
			}else {
				this.opacity = e.scrollTop/100
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		onShow() {
			// 每次更新用户信息
			if(this.hasLogin) {
				this.$store.dispatch('getShareCodeData')
				this.$store.dispatch('getUserInfoData')
				if(this.userInfo.allOrderNum) {
					this.allOrderNum[0].num = this.userInfo.allOrderNum.a
					this.allOrderNum[1].num = this.userInfo.allOrderNum.b
					this.allOrderNum[2].num = this.userInfo.allOrderNum.c
					this.phoneAction[0].name = this.userInfo.kefu_tel.val
				}
			}
			// 更新历史记录
			const historyList = uni.getStorageSync('historyList') || []
			this.historyList = historyList
		},
		onShareAppMessage() {
			return {
				path: '/pages/index/index'
			}
		},
		onShareTimeline() {
			return {
				path: '/pages/index/index'
			}
		},
		methods: {
			onOrderItem(index) {
				this.goPage('/pages/aPackage/orderList/orderList?type=' + index,true)
			},
			goSeeding() {
				this.$store.commit('SET_TABBAR_INDEX',1)
				uni.switchTab({
					url: '/pages/seeding/seeding'
				})
			},
			goSetting() {
				uni.navigateTo({
					url: '/pages/aPackage/setting/setting'
				})
			},
			itemClick({name}) {
				switch(name) {
					case '联系客服':
					this.phoneShow = true
					break;
					case '我的收藏':
						if(!this.hasLogin) {
							uni.showToast({
								title: '请先登录',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							},300)
							return
						}
						uni.navigateTo({
							url: '/pages/aPackage/collectList/collectList'
						})
					break;
				}
			},
			onCall() {
				uni.makePhoneCall({
					phoneNumber: this.phoneAction[0].name
				})
			},
			// 跳详情
			goDetail(goods_id) {
				if(!goods_id) return
				uni.navigateTo({
					url: `/pages/aPackage/goodsDetail/goodsDetail?goods_id=${goods_id}`,
					animationType: 'fade-in'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	.nav-title {
		font-size: 16px;
		color: #333333;
		font-weight: 700;
	}
	.wx-title {
		display: flex;
		justify-content: space-between;
		width: 500rpx;
		&_text {
			font-size: 16px;
			color: #333333;
			font-weight: 700;
		}
	}
	.user-box {
		height: 450rpx;
		position: relative;
		overflow: hidden;
		background-color: #f5f5f5;
		.user-info {
			margin-top: 150rpx;
			position: relative;
			z-index: 1;
			padding-left: 30rpx;
			.head-box {
				display: flex;
				align-items: center;
				&_nickname {
					font-size: 32rpx;
					color: #333333;
					margin-left: 20rpx;
					font-weight: 700;
				}
			}
			.grade-box {
				margin-top: 30rpx;
				padding-left: 30rpx;
				&_label {
					font-size: 32rpx;
					color: #ffffff;
				}
				&_desc {
					font-size: 28rpx;
					color: #ffffff;
					margin-top: 10rpx;
				}
			}
		}
		.user-bg {
			width: 750rpx;
			height: 100%;
			position: absolute;
			top: 0;
			left:0;
			right: 0;
			bottom: 0;
		}
		.user-vip-bg {
			width: 400rpx;
			height: 200rpx;
			position: absolute;
			right: 20rpx;
			bottom: -70rpx;
		}
		.user-arc {
			width: 750rpx;
			height: 40rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: -1rpx;
			z-index: 1;
		}
	}
	.list-box {
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		position: relative;
		top: -4rpx;
		background-color: #f5f5f5;
		padding-bottom: 20rpx;
		.money-box {
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 35rpx 0;
			border-radius: 10rpx;
			&_item {
				text-align: center;
				&_num {
					font-size: 32rpx;
					color: #333333;
				}
				&_label {
					font-size: 24rpx;
					color: #666666;
					margin-top: 6rpx;
				}
			}
		}
		.order-box {
			background-color: #ffffff;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			margin-top: 20rpx;
			.order-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				&_text {
					font-size: 28rpx;
					color: #333333;
				}
				&_right {
					&_text {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
			/deep/.u-grid {
				margin-top: 20rpx;
				.u-grid-item {
					position: relative;
					width: 106rpx;
					.order-label {
						font-size: 24rpx;
						color: #333333;
						margin-top: 10rpx;
					}
				}
			}
		}
		.more-box {
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 20rpx 0rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			.item-title {
				font-size: 28rpx;
				color: #333333;
				padding-left: 10rpx;
			}
			.share-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				&_title {
					font-size: 28rpx;
					color: #333333;
					padding-left: 10rpx;
				}
				&_value {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}
.history-box {
	display: flex;
	align-items: center;
	padding: 20rpx;
	box-sizing: border-box;
	.history-item {
		margin-right: 20rpx;
		.history-cover {
			width: 150rpx;
			height: 150rpx;
		}
	}
}
</style>